import React, { useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router-dom";
import axios from "axios";
import { ShopO, ChatO, CartO } from "@react-vant/icons";
import { ActionBar, Dialog } from "react-vant";
import "./index.css";

const Index: React.FC = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  const [items, setItems] = useState<any>({});
  const [num, setNum] = useState<any>(0);
  const [car, setCar] = useState<any>([]);
  const [carList, setCarList] = useState<any>([]);

  useEffect(() => {
    axios.get("/api/detail", { params: { id } }).then((resp) => {
      setItems(resp.data.items);
    });
  }, []);
  const addCar = () => {
    setNum(num + 1);
    // localStorage.getItem('car') ? JSON.parse(localStorage.getItem('car')!).push(items):localStorage.setItem('car',carList)
    car.push(items);
    localStorage.setItem("car", JSON.stringify(car));
    console.log(
      localStorage.getItem("car")
        ? JSON.parse(localStorage.getItem("car")!).push(items)
        : localStorage.setItem("car", carList)
    );
  };
  const gm = () => {
    Dialog.confirm({
      title: "支付",
      message: "购买成功请支付" + items.price + "元",
    });
  };
  return (
    <div>
      <img src={items.img} />
      <p>{items.title}</p>
      <p>{items.price}</p>
      <p>{items.word}</p>
      <p>{items.id}</p>
      <div className="demo-action-bar">
        <ActionBar>
          <ActionBar.Icon icon={<ChatO />} badge={{ dot: true }} text="客服" />
          <ActionBar.Icon
            icon={<CartO />}
            badge={{ content: num }}
            text="购物车"
            onClick={() => navigate("/home/cart")}
          />
          <ActionBar.Icon
            icon={<ShopO />}
            badge={{ content: 12 }}
            text="店铺"
          />
          <ActionBar.Button
            type="warning"
            text="加入购物车"
            onClick={() => addCar()}
          />
          <ActionBar.Button
            type="danger"
            text="立即购买"
            onClick={() => gm()}
          />
        </ActionBar>
      </div>
    </div>
  );
};
export default Index;
